<template>
  <div class="navigation-rag-container">
    <div class="page-header">
      <h2>导航RAG管理</h2>
      <p class="page-description">管理页面导航路径规划和RAG数据</p>
    </div>

    <!-- 搜索和工具栏 -->
    <div class="toolbar">
      <div class="search-section">
        <el-form :model="searchForm" :inline="true" size="default">
          <el-form-item label="页面名称">
            <el-input 
              v-model="searchForm.page_name" 
              placeholder="请输入页面名称"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="导航路径">
            <el-input 
              v-model="searchForm.navigation_path" 
              placeholder="请输入导航路径"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="场景ID">
            <el-input 
              v-model="searchForm.scene_id" 
              placeholder="请输入场景ID"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" :loading="loading">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="action-buttons">
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          新建导航
        </el-button>
        <el-button type="success" @click="handleImport">
          <el-icon><Upload /></el-icon>
          导入Excel
        </el-button>
        <el-button type="warning" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出Excel
        </el-button>
        <el-button type="info" @click="handleDownloadTemplate">
          <el-icon><Document /></el-icon>
          下载模板
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <el-table 
        :data="tableData" 
        :loading="loading"
        border
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="page_name" label="页面名称" width="150" show-overflow-tooltip />
        <el-table-column prop="navigation_path" label="导航路径" width="200" show-overflow-tooltip />
        <el-table-column prop="scene_id" label="场景ID" width="200" show-overflow-tooltip />
        <el-table-column label="页面标签页" width="200">
          <template #default="scope">
            <el-tag 
              v-for="(tag, index) in scope.row.page_tab" 
              :key="`tag-${index}-${tag}`"
              type="primary"
              size="small"
              style="margin-right: 4px; margin-bottom: 4px;"
            >
              {{ tag }}
            </el-tag>
            <span v-if="!scope.row.page_tab || scope.row.page_tab.length === 0" class="text-gray">
              暂无标签页
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="功能描述" width="200">
          <template #default="scope">
            <el-tag 
              v-for="(func, index) in scope.row.function_desc_list" 
              :key="`func-${index}-${func}`"
              size="small"
              style="margin-right: 4px; margin-bottom: 4px;"
            >
              {{ func }}
            </el-tag>
            <span v-if="!scope.row.function_desc_list || scope.row.function_desc_list.length === 0" class="text-gray">
              暂无功能描述
            </span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作描述" width="200">
          <template #default="scope">
            <el-tag 
              v-for="(op, index) in scope.row.operation_desc_list" 
              :key="`op-${index}-${op}`"
              type="success"
              size="small"
              style="margin-right: 4px; margin-bottom: 4px;"
            >
              {{ op }}
            </el-tag>
            <span v-if="!scope.row.operation_desc_list || scope.row.operation_desc_list.length === 0" class="text-gray">
              暂无操作描述
            </span>
          </template>
        </el-table-column>
        <el-table-column label="MCP工具" width="200">
          <template #default="scope">
            <el-tag 
              v-for="(mcp, index) in scope.row.mcp_list" 
              :key="`mcp-${index}-${mcp}`"
              type="warning"
              size="small"
              style="margin-right: 4px; margin-bottom: 4px;"
            >
              {{ getMcpDisplayName(mcp) }}
            </el-tag>
            <span v-if="!scope.row.mcp_list || scope.row.mcp_list.length === 0" class="text-gray">
              暂无MCP工具
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="created_by" label="创建者" width="120" />
        <el-table-column prop="created_at" label="创建时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button type="info" size="small" @click="handleViewPaths(scope.row)">
              <el-icon><Share /></el-icon>
              路径
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row)">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 批量操作栏 -->
      <div v-if="selectedRows.length > 0" class="batch-actions">
        <div class="batch-info">
          已选择 {{ selectedRows.length }} 个导航页面
        </div>
        <div class="batch-buttons">
          <el-button type="danger" @click="batchDelete" :icon="Delete">
            批量删除
          </el-button>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page_num"
          v-model:page-size="pagination.page_size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新建/编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="页面名称" prop="page_name">
              <el-input v-model="formData.page_name" placeholder="请输入页面名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="导航路径" prop="navigation_path">
              <el-input v-model="formData.navigation_path" placeholder="请输入导航路径" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="场景ID" prop="scene_id">
              <el-input v-model="formData.scene_id" placeholder="请输入场景ID" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="租户ID" prop="tenant_id">
              <el-input v-model="formData.tenant_id" placeholder="请输入租户ID" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="页面标签页">
          <el-input
            v-model="pageTabText"
            type="textarea"
            :rows="2"
            placeholder="请输入页面标签页，多个标签用逗号分隔"
          />
        </el-form-item>
        <el-form-item label="功能描述">
          <el-input
            v-model="functionDescText"
            type="textarea"
            :rows="3"
            placeholder="请输入功能描述，多个功能用逗号分隔"
          />
        </el-form-item>
        <el-form-item label="操作描述">
          <el-input
            v-model="operationDescText"
            type="textarea"
            :rows="3"
            placeholder="请输入操作描述，多个操作用逗号分隔"
          />
        </el-form-item>
        <el-form-item label="MCP工具" prop="mcp_list">
          <el-select
            v-model="formData.mcp_list"
            multiple
            collapse-tags
            collapse-tags-tooltip
            placeholder="选择MCP工具"
            style="width: 100%"
            filterable
            :loading="mcpLoading"
          >
            <el-option
              v-for="mcp in mcpOptions"
              :key="mcp.value"
              :label="mcp.label"
              :value="mcp.value"
            >
              <div class="mcp-option">
                <span class="mcp-name">{{ mcp.mcp_name }}</span>
                <span class="mcp-status">{{ mcp.status_display }}</span>
                <span class="mcp-tools" v-if="mcp.tools_count > 0">
                  {{ mcp.tools_count }}个工具
                </span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="前置路径">
          <el-input
            v-model="prevPathText"
            type="textarea"
            :rows="2"
            placeholder="请输入前置页面ID，多个ID用逗号分隔"
          />
        </el-form-item>
        <el-form-item label="后置路径">
          <el-input
            v-model="nextPathText"
            type="textarea"
            :rows="2"
            placeholder="请输入后置页面ID，多个ID用逗号分隔"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 路径关系弹窗 -->
    <el-dialog
      v-model="pathDialogVisible"
      title="页面路径关系"
      width="600px"
    >
      <div class="path-info">
        <h4>{{ currentPathData.page_name }}</h4>
        <p class="path-url">{{ currentPathData.navigation_path }}</p>
        
        <div class="path-section">
          <h5>前置页面</h5>
          <div class="path-tags">
            <el-tag 
              v-for="(prevId, index) in currentPathData.prev_path_list" 
              :key="`prev-${index}-${prevId}`"
              type="info"
              style="margin-right: 8px; margin-bottom: 8px;"
            >
              {{ prevId }}
            </el-tag>
            <span v-if="!currentPathData.prev_path_list || currentPathData.prev_path_list.length === 0" class="text-gray">
              无前置页面
            </span>
          </div>
        </div>
        
        <div class="path-section">
          <h5>后置页面</h5>
          <div class="path-tags">
            <el-tag 
              v-for="(nextId, index) in currentPathData.next_path_list" 
              :key="`next-${index}-${nextId}`"
              type="success"
              style="margin-right: 8px; margin-bottom: 8px;"
            >
              {{ nextId }}
            </el-tag>
            <span v-if="!currentPathData.next_path_list || currentPathData.next_path_list.length === 0" class="text-gray">
              无后置页面
            </span>
          </div>
        </div>
        
        <div class="path-section">
          <h5>MCP工具</h5>
          <div class="path-tags">
            <el-tag 
              v-for="(mcp, index) in currentPathData.mcp_list" 
              :key="`mcp-${index}-${mcp}`"
              type="warning"
              style="margin-right: 8px; margin-bottom: 8px;"
            >
              {{ getMcpDisplayName(mcp) }}
            </el-tag>
            <span v-if="!currentPathData.mcp_list || currentPathData.mcp_list.length === 0" class="text-gray">
              无MCP工具
            </span>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 导入弹窗 -->
    <el-dialog
      v-model="importDialogVisible"
      title="导入Excel数据"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="importForm" label-width="100px">
        <el-form-item label="导入模式">
          <el-select v-model="importForm.import_mode" style="width: 100%">
            <el-option label="仅插入新数据" value="insert" />
            <el-option label="更新已存在数据" value="update" />
            <el-option label="插入或更新" value="upsert" />
          </el-select>
        </el-form-item>
        <el-form-item label="Excel文件">
          <el-upload
            ref="uploadRef"
            :auto-upload="false"
            :show-file-list="true"
            :limit="1"
            accept=".xlsx,.xls"
            @change="handleFileChange"
          >
            <el-button type="primary">
              <el-icon><Upload /></el-icon>
              选择文件
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleImportSubmit" :loading="importLoading">
            开始导入
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import type { FormInstance, FormRules, UploadInstance } from 'element-plus'
import { 
  Search, 
  Refresh, 
  Plus, 
  Upload, 
  Download, 
  Document, 
  Edit, 
  Delete, 
  Share 
} from '@element-plus/icons-vue'
import { 
  navigationApi, 
  type NavigationData, 
  type NavigationSearchParams,
  type NavigationCreateRequest,
  type NavigationUpdateRequest
} from '@/api/navigation'
import { baseApi } from '@/api/base'

// 定义本地接口类型
interface SearchForm {
  page_name: string
  navigation_path: string
  scene_id: string
  tenant_id: string
  created_by: string
}

interface FormData {
  page_name: string
  navigation_path: string
  scene_id: string
  tenant_id: string
  page_tab: string[]
  function_desc_list: string[]
  operation_desc_list: string[]
  prev_path_list: string[]
  next_path_list: string[]
  mcp_list: string[]
}

// 响应式数据
const loading = ref(false)
const submitLoading = ref(false)
const importLoading = ref(false)
const mcpLoading = ref(false)
const tableData = ref<NavigationData[]>([])
const selectedRows = ref<NavigationData[]>([])

// MCP工具选项数据
const mcpOptions = ref<any[]>([])

// 搜索表单
const searchForm = reactive<SearchForm>({
  page_name: '',
  navigation_path: '',
  scene_id: '',
  tenant_id: '',
  created_by: ''
})

// 分页数据
const pagination = reactive({
  page_num: 1,
  page_size: 20,
  total: 0
})

// 弹窗相关
const dialogVisible = ref(false)
const pathDialogVisible = ref(false)
const importDialogVisible = ref(false)
const isEdit = ref(false)
const currentEditId = ref('')

// 表单数据
const formData = reactive<FormData>({
  page_name: '',
  navigation_path: '',
  scene_id: '',
  tenant_id: 'default',
  page_tab: [],
  function_desc_list: [],
  operation_desc_list: [],
  prev_path_list: [],
  next_path_list: [],
  mcp_list: []
})

// 辅助表单字段（用于文本输入）
const pageTabText = ref('')
const functionDescText = ref('')
const operationDescText = ref('')
const prevPathText = ref('')
const nextPathText = ref('')

// 路径数据
const currentPathData = ref<NavigationData>({} as NavigationData)

// 导入表单
const importForm = reactive({
  import_mode: 'insert',
  file: null as File | null
})

// 表单验证规则
const formRules: FormRules = {
  page_name: [
    { required: true, message: '请输入页面名称', trigger: 'blur' },
    { max: 200, message: '页面名称不能超过200个字符', trigger: 'blur' }
  ],
  navigation_path: [
    { required: true, message: '请输入导航路径', trigger: 'blur' },
    { pattern: /^(http:\/\/|https:\/\/|\/)/, message: '导航路径格式不正确', trigger: 'blur' }
  ],
  scene_id: [
    { required: true, message: '请输入场景ID', trigger: 'blur' },
    { 
      pattern: /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i,
      message: '场景ID格式不正确，应为UUID格式',
      trigger: 'blur'
    }
  ],
  tenant_id: [
    { required: true, message: '请输入租户ID', trigger: 'blur' }
  ]
}

// 计算属性
const dialogTitle = computed(() => {
  return isEdit.value ? '编辑导航页面' : '新建导航页面'
})

// 引用
const formRef = ref<FormInstance>()
const uploadRef = ref<UploadInstance>()

// 方法
const loadMCPOptions = async () => {
  mcpLoading.value = true
  try {
    const response = await baseApi.getMCPOptions()
    
    if (response.code === 200) {
      mcpOptions.value = response.data.mcp_tools
      console.log('MCP工具选项加载成功:', {
        mcp_count: response.data.count,
        mcp_tools: response.data.mcp_tools
      })
    } else {
      ElMessage.warning('获取MCP工具选项失败: ' + response.message)
    }
  } catch (error) {
    console.error('加载MCP工具选项失败:', error)
    ElMessage.error('加载MCP工具选项失败')
  } finally {
    mcpLoading.value = false
  }
}

const getMcpDisplayName = (mcpValue: string) => {
  const mcp = mcpOptions.value.find(m => m.value === mcpValue)
  return mcp ? mcp.mcp_name : mcpValue
}

const loadData = async () => {
  loading.value = true
  try {
    // 构建查询参数
    const params: NavigationSearchParams = {
      page_num: pagination.page_num,
      page_size: pagination.page_size,
      ...Object.fromEntries(
        Object.entries(searchForm).filter(([_, value]) => value && value.trim())
      )
      }
    
    // 调用API
    const result = await navigationApi.getList(params)
    // console.log("result:"+JSON.stringify(result))
    
    if (result.code === 200 || result.data) {
      tableData.value = result.data.items
      pagination.total = result.data.total
    } else {
      ElMessage.error(result.message || '获取数据失败')
    }
  } catch (error) {
    ElMessage.error('网络请求失败')
    console.error('Load data error:', error)
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.page_num = 1
  loadData()
}

const handleReset = () => {
  searchForm.page_name = ''
  searchForm.navigation_path = ''
  searchForm.scene_id = ''
  searchForm.tenant_id = ''
  searchForm.created_by = ''
  pagination.page_num = 1
  loadData()
}

const handleAdd = () => {
  isEdit.value = false
  currentEditId.value = ''
  resetForm()
  dialogVisible.value = true
}

const handleEdit = (row: any) => {
  isEdit.value = true
  currentEditId.value = row.page_id
  
  // 填充表单数据
  Object.assign(formData, row)
  pageTabText.value = row.page_tab?.join(',') || ''
  functionDescText.value = row.function_desc_list?.join(',') || ''
  operationDescText.value = row.operation_desc_list?.join(',') || ''
  prevPathText.value = row.prev_path_list?.join(',') || ''
  nextPathText.value = row.next_path_list?.join(',') || ''
  formData.mcp_list = row.mcp_list || []
  
  dialogVisible.value = true
}

const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除页面"${row.page_name}"吗？`,
      '删除确认',
      {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }
    )
    
    const result = await navigationApi.delete(row.page_id, 'current_user')
    
    if (result.code === 200 || result.data) {
      ElMessage.success('删除成功')
      loadData()
    } else {
      ElMessage.error(result.message || '删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除操作失败')
      console.error('Delete error:', error)
    }
  }
}

const batchDelete = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要批量删除这 ${selectedRows.value.length} 个导航页面吗？`,
      '批量删除确认',
      {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }
    )
    
    const pageIds = selectedRows.value.map(row => row.page_id)
    const result = await navigationApi.batchDelete(pageIds, 'current_user')
    
    if (result.code === 200 || result.data) {
      ElMessage.success(`批量删除成功：${result.data.success_count || selectedRows.value.length} 个页面`)
      selectedRows.value = []
      loadData()
    } else {
      ElMessage.error(result.message || '批量删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量删除操作失败')
      console.error('Batch delete error:', error)
    }
  }
}

const handleViewPaths = (row: any) => {
  currentPathData.value = row
  pathDialogVisible.value = true
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    // 处理数组字段
    const submitData = {
      ...formData,
      page_tab: pageTabText.value.split(',').filter(item => item.trim()),
      function_desc_list: functionDescText.value.split(',').filter(item => item.trim()),
      operation_desc_list: operationDescText.value.split(',').filter(item => item.trim()),
      prev_path_list: prevPathText.value.split(',').filter(item => item.trim()),
      next_path_list: nextPathText.value.split(',').filter(item => item.trim()),
      created_by: 'current_user',
      updated_by: 'current_user'
    }
    
    submitLoading.value = true
    let result
    
    if (isEdit.value) {
      result = await navigationApi.update(currentEditId.value, submitData as NavigationUpdateRequest)
    } else {
      result = await navigationApi.create(submitData as NavigationCreateRequest)
    }
    
    if (result.code === 200 || result.data) {
      ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
      dialogVisible.value = false
      loadData()
    } else {
      ElMessage.error(result.message || '操作失败')
    }
  } catch (error) {
    ElMessage.error('表单验证失败')
    console.error('Submit error:', error)
  } finally {
    submitLoading.value = false
  }
}

const handleImport = () => {
  importForm.import_mode = 'insert'
  importForm.file = null
  importDialogVisible.value = true
}

const handleFileChange = (file: any) => {
  importForm.file = file.raw
}

const handleImportSubmit = async () => {
  if (!importForm.file) {
    ElMessage.warning('请选择要导入的Excel文件')
    return
  }
  
  try {
    importLoading.value = true
    
    const result = await navigationApi.import(
      importForm.file, 
      importForm.import_mode as 'insert' | 'update' | 'upsert', 
      'current_user'
    )
    
    if (result.code === 200 || result.data) {
      ElNotification({
        title: '导入成功',
        message: `成功导入 ${result.data.success_count} 条数据`,
        type: 'success'
      })
      importDialogVisible.value = false
      loadData()
    } else {
      ElMessage.error(result.message || '导入失败')
    }
  } catch (error) {
    ElMessage.error('导入操作失败')
    console.error('Import error:', error)
  } finally {
    importLoading.value = false
  }
}

const handleExport = async () => {
  try {
    const blob = await navigationApi.export({})
    
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `navigation_data_${new Date().toISOString().slice(0, 10).replace(/-/g, '')}.xlsx`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      window.URL.revokeObjectURL(url)
      
      ElMessage.success('导出成功')
  } catch (error) {
    ElMessage.error('导出操作失败')
    console.error('Export error:', error)
  }
}

const handleDownloadTemplate = async () => {
  try {
    const blob = await navigationApi.downloadTemplate()
    
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = 'navigation_import_template.xlsx'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      window.URL.revokeObjectURL(url)
      
      ElMessage.success('模板下载成功')
  } catch (error) {
    ElMessage.error('模板下载失败')
    console.error('Download template error:', error)
  }
}

const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
}

const handleSizeChange = (val: number) => {
  pagination.page_size = val
  pagination.page_num = 1
  loadData()
}

const handleCurrentChange = (val: number) => {
  pagination.page_num = val
  loadData()
}

const resetForm = () => {
  formData.page_name = ''
  formData.navigation_path = ''
  formData.scene_id = ''
  formData.tenant_id = 'default'
  formData.page_tab = []
  formData.function_desc_list = []
  formData.operation_desc_list = []
  formData.prev_path_list = []
  formData.next_path_list = []
  formData.mcp_list = []
  
  pageTabText.value = ''
  functionDescText.value = ''
  operationDescText.value = ''
  prevPathText.value = ''
  nextPathText.value = ''
  
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 生命周期
onMounted(() => {
  loadMCPOptions()
  loadData()
})
</script>

<style scoped>
.navigation-rag-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-description {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.toolbar {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-section {
  margin-bottom: 16px;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.pagination-container {
  padding: 20px;
  display: flex;
  justify-content: center;
  background: white;
  border-top: 1px solid #ebeef5;
}

.batch-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f0f9ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

.batch-info {
  color: #1e40af;
  font-weight: 500;
}

.batch-buttons {
  display: flex;
  gap: 8px;
}

.text-gray {
  color: #909399;
  font-style: italic;
}

.path-info {
  padding: 10px 0;
}

.path-info h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 18px;
}

.path-url {
  margin: 0 0 20px 0;
  color: #606266;
  font-family: 'Courier New', monospace;
  background: #f5f7fa;
  padding: 8px 12px;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.path-section {
  margin: 16px 0;
}

.path-section h5 {
  margin: 0 0 8px 0;
  color: #606266;
  font-size: 14px;
  font-weight: 600;
}

.path-tags {
  min-height: 24px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-table th) {
  background-color: #fafafa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #fafafa;
}

:deep(.el-table__body-wrapper) {
  overflow-x: auto;
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-dialog__header) {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__footer) {
  padding: 10px 20px 20px;
  border-top: 1px solid #ebeef5;
}

.mcp-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mcp-name {
  font-weight: 500;
  color: #303133;
}

.mcp-status {
  font-size: 12px;
  color: #909399;
  background: #f4f4f5;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
}

.mcp-tools {
  font-size: 11px;
  color: #67c23a;
  margin-left: auto;
}

@media (max-width: 768px) {
  .navigation-rag-container {
    padding: 10px;
  }
  
  .toolbar {
    padding: 15px;
  }
  
  .search-section :deep(.el-form--inline .el-form-item) {
    display: block;
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .action-buttons {
    flex-wrap: wrap;
  }
  
  :deep(.el-table__body-wrapper) {
    overflow-x: scroll;
  }
}
</style>
